<template>
    <div class="monitoringlist">
        <Row>
            <Col :xs="24">
                <Input
                    class="w-input"
                    v-model="searchKey"
                    clearable
                    placeholder="采集点名称"
                />
                <Select
                    class="w-select-110"
                    clearable
                    v-model="searchStatus"
                    placeholder="条件"
                >
                    <Option value="3">已完成</Option>
                    <Option value="2">进行中</Option>
                    <Option value="1">未开始</Option>
                </Select>
                <Button type="primary" @click="loadPage(1)" class="btn">
                    <Icon type="ios-search" size="14" />
                </Button>
                <Button @click="cancel" class="btn">
                    <i class="iconfont icon-gengxin"></i>
                </Button>
                <Button @click="openBi" type="primary"> 监控大屏 </Button>
            </Col>
        </Row>
        <Table
            class="m-table"
            border
            stripe
            :loading="isloading"
            :columns="columns"
            :data="datalist"
        ></Table>
        <div class="page">
            <Page
                :total="count"
                :current="pageNo"
                :page-size="pageSize"
                show-total
                show-elevator
                @on-change="loadPage"
            />
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
export default {
    data () {
        return {
            isloading: false,
            searchKey: "",
            searchStatus: "",
            columns: [
                {
                    title: "排序",
                    key: "iNum",
                    align: "center",
                    width: 70,
                    render: (h, params) => {
                        let iNum =
                            (this.pageNo - 1) * this.pageSize +
                            params.index +
                            1;
                        return h("span", iNum);
                    }
                },
                {
                    title: "采集点",
                    key: "locationName",
                    align: "center"
                },
                {
                    title: "采集地点",
                    key: "address",
                    align: "center"
                },
                {
                    title: "开始时间",
                    key: "startTime",
                    align: "center",
                    render: (h, params) => {
                        let startTime = params.row.startTime;
                        if (startTime === "" || startTime == null) {
                            return h("span", "--");
                        } else {
                            return h("span", startTime);
                        }
                    }
                },
                {
                    title: "完成时间",
                    key: "time",
                    align: "center",
                    render: (h, params) => {
                        let time = params.row.time;
                        if (time === "" || time == null) {
                            return h("span", "--");
                        } else {
                            return h("span", {
                                domProps: {
                                    innerHTML: time
                                }
                            });
                        }
                    }
                },
                {
                    title: "平均采集速度（人 / 分钟）",
                    key: "collectSpeed",
                    align: "center"
                },
                {
                    title: "通道数量（个）",
                    key: "channelsNum",
                    align: "center",
                    render: (h, params) => {
                        let channelsNum = params.row.channelsNum;
                        if (channelsNum === "" || channelsNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", {
                                domProps: {
                                    innerHTML: channelsNum
                                }
                            });
                        }
                    }
                },
                {
                    title: "支援工作人数（人）",
                    key: "supportNum",
                    align: "center"
                },
                {
                    title: "已采集人数（人）",
                    key: "yetCollectNum",
                    align: "center",
                    render: (h, params) => {
                        let yetCollectNum = params.row.yetCollectNum;
                        if (yetCollectNum === "" || yetCollectNum == null) {
                            return h("span", "--");
                        } else {
                            return h("span", {
                                domProps: {
                                    innerHTML: yetCollectNum
                                }
                            });
                        }
                    }
                },
                {
                    title: "剩余预约人数（人）",
                    key: "appointmentNum",
                    align: "center"
                },
                {
                    title: "采集点联系人",
                    key: "contactName",
                    align: "center",
                    render: (h, params) => {
                        let contactName = params.row.contactName;
                        if (contactName === "" || contactName == null) {
                            return h("span", "--");
                        } else {
                            return h("span", contactName);
                        }
                    }
                },
                {
                    title: "联系电话",
                    key: "contactPhone",
                    align: "center",
                    render: (h, params) => {
                        let contactPhone = params.row.contactPhone;
                        if (contactPhone === "" || contactPhone == null) {
                            return h("span", "--");
                        } else {
                            return h("span", contactPhone);
                        }
                    }
                },
                {
                    title: "状态",
                    key: "status",
                    align: "center",
                    render: (h, params) => {
                        let status = params.row.status;
                        let statusText =
                            status === '1'
                                ? "未开始"
                                : status === '2'
                                ? "进行中"
                                : "已完成";
                        return h("span", {
                            domProps: {
                                innerHTML: statusText
                            }
                        });
                    }
                },
                {
                    title: "操作",
                    key: "operate",
                    align: "center",
                    width: 160,
                    fixed: "right",
                    render: (h, params) => {
                        let taskLocationId = params.row.id;
                        let taskId = params.row.taskId;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: "#258afb",
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/nucleicacid/missionMonitoring/collectionPointdetails",
                                                {
                                                    taskId,
                                                    taskLocationId
                                                }
                                            );
                                        }
                                    }
                                },
                                "详情"
                            ),
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: "#399c32",
                                        margin: "0px 6px"
                                    },
                                    on: {
                                        click: () => {
                                            this.functionJS.queryNavgationTo(
                                                this,
                                                "/index/nucleicacid/missionMonitoring/doorChecklist",
                                                {
                                                    taskLocationId
                                                }
                                            );
                                        }
                                    }
                                },
                                "上门检测列表"
                            )
                        ];
                    }
                }
            ],
            datalist: [],
            count: 0,
            pageSize: 10,
            pageNo: 1,
            id: null,
            fundcode: false,
            title: ""
        };
    },
    created () {},
    mounted () {
        // 首次加载数据
        this.loadPage(this.pageNo);
    },
    methods: {
        srInput () {
            this.info.phone = this.info.phone.replace(/[^0-9]/g, "");
        },
        cancel () {
            this.searchKey = "";
            this.searchStatus = "";
            this.loadPage(1);
        },
        // 加载列表数据
        loadPage (pageNo) {
            this.isloading = true;
            this.pageNo = parseInt(pageNo);
            var params = {};
            params.searchKey = this.searchKey.trim();
            params.searchStatus = this.searchStatus;
            params.taskId = this.$route.query.id;
            params.pageNo = pageNo;
            params.pageSize = this.pageSize;
            this.$axios
                .post(api.queryLocationListByTaskId, params)
                .then((resp) => {
                    if (resp.data.success) {
                        this.count = resp.data.object.total;
                        if (resp.data.object.records) {
                            this.datalist = resp.data.object.records;
                            this.isloading = false;
                        } else {
                            this.datalist = [];
                            this.count = 0;
                            this.isloading = false;
                        }
                    } else {
                        this.isloading = false;
                        this.$Message.info("数据异常请稍后重试");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        openBi () {
            window.open(
                window.location.protocol +
                    "//" +
                    window.location.host +
                    this.$store.state.prefix +
                    "/#/nucleAcidmonitor" +
                    "?id=" +
                    this.$route.query.id
            );
        }
    }
};
</script>
<style lang="less" scoped>
.monitoringlist {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .btn {
        width: 45px;
        height: 30px;
        line-height: 10px;
    }
    .w-select-80 {
        width: 80px;
    }
    .w-select-110 {
        width: 110px;
    }
    .w-select-300 {
        width: 250px;
    }
    .w-input {
        width: 200px;
    }
    .m-table {
        margin: 10px 0;
    }
    .page {
        text-align: center;
        margin: 20px 0;
    }
}
.w-select {
    width: 250px;
}
.w-input {
    width: 300px;
}
/deep/ .ivu-modal-wrap {
    .ivu-modal {
        float: right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
